<template>
  <div>
    <BasicTable @register="registerTable" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, toRefs, h } from 'vue';
  import {
    BasicTable,
    useTable,
    BasicColumn,
  } from '../../../components/Table';

  const columns: BasicColumn[] = [
    {
      title: '序号',
      dataIndex: 'playOrder',
    },
    {
      title: '目录ID',
      dataIndex: 'id',
    },
    {
      title: '名称',
      dataIndex: 'text',
    },
    {
      title: '链接',
      dataIndex: 'href',
      customRender: ({ text }) => {
        const baseBookUrl = 'http://47.121.138.148:26200/book/';
        return {
          children: h('a', { href: baseBookUrl + text, target: '_blank' }, '查看')
        }
      }
    },
  ];

  export default defineComponent({
    components: { BasicTable },
    props: {
      data: <any>Array,
    },
    setup(props) {
      const { data } = toRefs(props);
      const [registerTable, { getDataSource }] = useTable({
        columns: columns,
        showIndexColumn: false,
        dataSource: data,
        scroll: { y: '100%' },
        pagination: false,
      });


      return {
        registerTable,
        getDataSource,
      };
    },
  });
</script>
